<template>
    <!--注册表单-->
<div class="register-box">
    <!--标题-->
    <div class="title-box">
        <hr/>
        <span class="title-item">访客注册</span>
        <hr/>
    </div>
    <!--表单-->
    <div class="left-form-box">
        <my-title-input class="form-item" label="用户名">
                <input
                    class="input-item"
                    slot="input-item"
                    type="text"
                    v-medol="registerForm.account"
                />
        </my-title-input>
        <my-title-input class="form-item" label="密码">
            <input
                class="input-item"
                slot="input-item"
                type="text"
                v-medol="registerForm.password"
            />
        </my-title-input>
        <my-title-input class="form-item" label="姓名">
            <input
                class="input-item"
                slot="input-item"
                type="text"
                v-medol="registerForm.username"
            />
        </my-title-input>
        <my-title-input class="form-item" label="性别">
            <a-radio-group
                class="sex-radio-box"
                slot="input-item"
                name="radioGroup"
                :default-value="'男'"
                v-model="registerForm.gender"
            >
                <a-radio :value="'男'">男</a-radio>
                <a-radio :value="'女'">女</a-radio>
            </a-radio-group>
        </my-title-input>
    </div>
    <div class="right-form-box">
        <my-title-input class="form-item" label="手机号码">
            <input
                class="input-item"
                slot="input-item"
                type="text"
                v-model="registerForm.phoneNum"
            />
        </my-title-input>
        <my-title-input class="form-item" label="电子邮箱">
            <input
                class="input-item"
                slot="input-item"
                type="text"
            />
        </my-title-input>
        <my-title-input class="form-item" label="验证码">
            <div slot="input-item">
                <input
                    class=" code-img-input"
                    type="text"
                    v-model="registerForm.smsCode"
                />
                <img
                    class="code-img"
                    :src="codeImg"
                    @click="loadCodeImg"
                    :alt="''"
                />
            </div>
        </my-title-input>
    </div>
    <!--注册按钮-->
    <button class="register-button" :click="Register">注册</button>
    <!--登录-->
    <div class="login-box">
        <div class="login-item">已有账号？</div>
        <router-link class="login-item login-link" :to="'/account/login'">点击登录</router-link>
    </div>
</div>


</template>

<script>
import {getCaptcha, doRegister} from "../../api/CommonApi.js"
import {generateMixed} from "@/utils/StringUtils";
import MyTitleInput from "../../components/FunctionComponent/MyTitleInput";
export default{
    name: "RegisterForm",
    data(){
        return{
            //二维码
            codeImg:"",
            captcha: {
                "key": "",
                "value": "",
            },
            //注册表单
            registerForm:{
                "account": "",
                "gender": "",  //性别
                "password": "",
                "phoneNum": "",
                "smsCode": "",
                "username": ""
            }
        }
    },
    components:{
        MyTitleInput,
    },
    created() {
        this.loadCodeImg()
    },
    methods:{
        // 从服务器加载图片验证码
        loadCodeImg(){
            this.captcha.key  = generateMixed(16);
            getCaptcha(this.captcha.key).then(res => {
                console.log(res);
                this.codeImg = res.result;
            }).catch(err => {
                console.log(err, 12234);
            })
        },
        Register(){
            console.log(this.registerForm);
            doRegister(this.registerForm).then(res => {
                console.log(res);
            }).catch(err => {
                console.log(err);
            })
        }
    }
}

</script>

<style lang="less" scoped>
//phone
@media only screen and (max-width: 576px){
    .register-box{
        @width:calc(94vw - 6vw);  //88vw
        @min-height:73vw;
        @max-height:120vw;
        width:@width;
        min-height: @min-height;
        height:@max-height;
        margin:auto;
        display:grid;
        grid-template-rows: repeat(10, 1fr);
        place-content: center;
        .title-box{
            grid-row: 1 / span 1;
            grid-column: 1 / span 1;
            width:@width;
            height:calc(@max-height / 10);
            display:flex;
            justify-content: space-between;
            align-items: center;
            .title-item{
                text-align: center;
                line-height: 5vw;
                font-size: 4vw;
                font-weight: 400;
                color: #4E4E4E;
            }
            hr{
                width: calc(@width / 2 - 14vw);
                border-top: 1px solid #D2D2D2;
                border-bottom: none;
                display:block;
                margin-left: 0;
                margin-right:0;
            }
        }

       .left-form-box{
           grid-row: 2 / span 4;
           grid-column: 1  / span 1;
           width: @width;
           height:calc(@max-height / 10 * 4);
           display:flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: center;
           .form-item{
               .input-item{
                   width:calc((@width - 13vw) / 7 * 5); //(88vw - 13vw) / 7 * 5
                   height:10vw;
                   border:1px solid #BFBFBF;
                   border-radius: 1vw;
               }
               .sex-radio-box{
                   width:calc((@width - 13vw) / 7 * 5);  //(88vw - 13vw) / 7 * 5
                   height:10vw;
                   display:flex;
                   align-items: center;
               }
           }

       }
        .right-form-box{
            grid-row: 6 / span 3;
            grid-column: 1  / span 1;
            width:@width;
            height: calc(@max-height / 10 * 3);
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .form-item{
                .input-item{
                    width:calc((@width - 13vw) / 7 * 5);  //(88vw - 13vw) / 7 * 5
                    height:10vw;
                    border:1px solid #BFBFBF;
                    border-radius: 1vw;
                }
                .code-img-input{
                    width:calc((@width - 13vw) / 7 * 5 - 25vw);  //(88vw - 13vw) / 7 * 5
                    height:10vw;
                    margin-right:2vw;
                    vertical-align: bottom;
                    border:1px solid #BFBFBF;
                    border-radius: 1vw;
                }
                .code-img{
                    width:22vw;
                    height:10vw;
                    border:none;
                    border-radius:1vw;
                    overflow: hidden;
                    object-fit: contain;
                    vertical-align: bottom;
                }
            }

        }
        .register-button{
            grid-row: 9 / span 1;
            grid-column: 1 / span 1;
            width:calc(@width - 13vw);  //88vw - 13vw
            height:calc(@max-height / 10 / 5 * 4);
            justify-self: center;
            align-self: flex-end;
            border-radius: 1vw;
            background-color:#5EA4EE;
            border:none;
            color:white;
            font-size: 4vw;


        }
        .login-box{
            grid-row: 10 / span 1;
            grid-column: 1 / span 1;
            width:@width;
            min-height:calc(@max-height / 10);
            display:flex;
            justify-content: center;
            align-items: flex-end;
            .login-item{
                height:6vw;
                line-height: 6vw;
                text-align: center;
                font-size:4vw;
                color:#4E4E4E;
            }
            .login-link{
                height:6vw;
                line-height: 6vw;
                text-align: center;
                font-size:4vw;
                color:#5EA4EE;
            }

        }

    }

}

//pc
@media only screen and (min-width: 576px){
    .register-box{
        @width:560px;
        @height:332px;
        width:@width;
        height:@height;
        margin:0 auto;
        display:grid;
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(2, 1fr);
        //标题
        .title-box{
            grid-row:1 / sapn 1;
            grid-column: 1 / span 2;
            width:@width;
            height: calc(@height / 6);
            display:flex;
            justify-content: space-between;
            align-items: center;
            .title-item{
                text-align: center;
                line-height: 20px;
                font-size: 15px;
                font-weight: 400;
                color: #4E4E4E;
            }
            hr{
                width: calc(@width / 2 - 60px);
                border-top: 1px solid #D2D2D2;
                border-bottom: none;
                display:block;
                margin-left: 0;
                margin-right:0;
            }
        }
        //表单
        .left-form-box{
            grid-row: 2 / sapn 4;
            grid-column: 1 / span 1;
            width: calc(@width / 2);
            height:calc(@height / 6 * 4);
            display:flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            .form-item{
                .input-item{
                    width:195px;
                    height:40px;
                    border:1px solid #BFBFBF;
                    border-radius: 5px;
                }
                .sex-radio-box{
                    width:195px;
                    height:40px;
                    display:flex;
                    align-items: center;
                }
            }

        }
        .right-form-box{
            grid-row: 2 / sapn 3;
            grid-column: 2 / span 1;
            width: calc(@width / 2);
            height:calc(@height / 6 * 3);
            display:flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-between;
            .form-item{
                .input-item{
                    width:195px;
                    height:40px;
                    border:1px solid #BFBFBF;
                    border-radius: 5px;
                }
                .code-img-input{
                    width:calc(195px - 100px);
                    height:40px;
                    margin-right:5px;
                    vertical-align: bottom;
                    border:1px solid #BFBFBF;
                    border-radius: 5px;
                }
                .code-img{
                    width:93px;
                    height:40px;
                    border-radius:5px;
                    overflow: hidden;
                    object-fit: contain;
                    vertical-align: bottom;
                    border:none;

                }
            }
        }
        //注册按钮
        .register-button{
            grid-row: 6 / span 1;
            grid-column: 1 / span 2;
            width: calc(@width / 2);
            height: calc(@height / 6 / 3 * 2);
            justify-self: center;
            align-self: end;
            border-radius:5px;
            background-color:#5EA4EE;
            cursor:pointer;
            border:none;
            color:white;
            font-size:14px;
        }
        .login-box{
            grid-row:5 / span 1;
            grid-column: 2 / span 2;
            width: calc(@width / 2);
            height:calc(@height / 6 - 15px);
            place-self:flex-end;
            display:flex;
            justify-content: flex-end;
            align-items: center;
            .login-item{
                height:20px;
                line-height: 20px;
                text-align: center;
                font-size:14px;
                color:#4E4E4E;

            }
            .login-link{
                height:20px;
                line-height: 20px;
                text-align: center;
                font-size:14px;
                color:#5EA4EE;
                cursor:pointer;
            }
        }


    }
}

</style>
